import React from 'react';
import { Link } from 'react-router-dom';
import toFixed from 'shared/utils/toFixed';
import { fetchHomereCommendList } from '../api';
import './index.less';

const sanjiaoxing = require('static/sanjiaoxing.png')

export default class HomereCommendList extends React.PureComponent {
  state = {
    data: []
  }

  componentDidMount() {
    fetchHomereCommendList().then(({ data }) => {
      this.setState({ data });
    })
  }

  handleGloablMonitor = (title) => {
    gloablMonitor(['首页-推荐', title])
  }

  render() {
    const { data } = this.state;
    return (
      <div className="homere-commend-list">
        <div className="homere-commend-list-title">
          <span>产品推荐</span>
        </div>
        <div  className="homere-commend-item">
          {data.map((item, index) => (
            <div key={index} className="homere-product-list-item">
              <span className="item-title">{item.title}</span>
              <span className="item-brief">
                {/* <span>{!!item.brief && '赠 '}</span>{item.brief} */}
              </span>
              <span className="item-price">￥{toFixed(item.price)}</span>
              <Link
                to={`/ProductDetail/${item.product_id}/buyProductDetail`}
                className="item-link-img"
                onClick={() => this.handleGloablMonitor(item.title)}
              >
                <img src={item.image} alt='' />
              </Link>
              <Link
                to={`/ProductDetail/${item.product_id}/buyProductDetail`}
                className="item-link"
                onClick={() => this.handleGloablMonitor(item.title)}
              >
                立即查看
                <img src={sanjiaoxing} alt="" />
              </Link>
            </div>
          ))}
        </div>
      </div>
    );
  }
}